<template>
<el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="1000px" height="1000px"
    @open="handleDialogOpen()" v-loading="loading" >
  <el-tabs :tab-position="tabPosition" style="height: 800px;">
    <el-tab-pane label="基本信息">
        <h4>车辆基本信息</h4>
        <el-form :inline="true" :model="formTruck" class="demo-form-inline" >
        <el-form-item label="车辆编号:" label-width="120px" prop="id">
            <el-input  placeholder="请输入车辆编号" v-model="formTruck.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="车牌号码:" prop="licensePlate" label-width="120px">
            <el-input  placeholder="请输入车牌号码" v-model="formTruck.licensePlate"></el-input>
        </el-form-item>
        <el-form-item label="所属机构:" label-width="120px">
            <el-input  placeholder="请输入所属机构"   disabled></el-input>
        </el-form-item>
        <el-form-item label="所属车队:" label-width="120px" prop="fleetId">
            <el-input  placeholder="请输入所属车队" v-model="formTruck.fleetId" disabled></el-input>
        </el-form-item>
        <el-form-item label="车型名称:" label-width="120px" prop="truckTypeId">
            <el-input  placeholder="请输入车型名称" disabled v-model="formTruck.truckTypeId"></el-input>
        </el-form-item>
        <el-form-item label="车辆载重:" label-width="120px" prop="allowableLoad">
            <el-input  placeholder="请输入车辆载重" v-model="formTruck.allowableload"></el-input>
        </el-form-item>
        <el-form-item label="工作状态:" label-width="120px">
            <el-input  placeholder="请输入工作状态" disabled></el-input>
        </el-form-item>
        <el-form-item label="装载状态:" label-width="120px">
            <el-input  placeholder="请输入装载状态" disabled></el-input>
        </el-form-item>
        <el-form-item label="GPSID:" label-width="120px">
            <el-input  placeholder="请输入GPSID" v-model="formTruck.deviceGpsId"></el-input>
        </el-form-item><br>
        <el-form-item label="图片信息" label-width="120px">
                <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false" v-model="formTruck.picture">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                    <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                    >
                    <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                    >
                    <i class="el-icon-download"></i>
                    </span>
                    <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                    >
                    <i class="el-icon-delete"></i>
                    </span>
                </span>
                </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </el-form-item>
        <br><hr>
        <div v-show="jbxxBj" style="text-align: center">
            <el-button  type="danger" @click="jbxxbj()">编辑</el-button>
            <el-button  @click="handleDialogClose()">取消</el-button>
        </div>
        <div v-show="jbxxAdd" style="text-align: center">
            <el-button type="danger" @click="onSubmit('formmInline')" >保存</el-button>
            <el-button  @click="returnPage">返回</el-button>
       </div>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="行驶证信息">
        <h4>行驶证信息</h4>
        <el-form :inline="true" :model="formTrucklicense" class="demo-form-inline" :disabled=true>
        <el-form-item label="行驶证号:" prop="id" label-width="120px" >
            <el-input  placeholder="请输入行驶证号"  v-model="formTrucklicense.id"></el-input>
        </el-form-item>
        <el-form-item label="发动机号码:" label-width="120px" prop="engineNumber">
            <el-input  placeholder="请输入发动机号码" v-model="formTrucklicense.engineNumber"></el-input>
        </el-form-item>
        <el-form-item label="注册时间:" label-width="120px" prop="registrationDate">
            <div class="block">
            <el-date-picker
              type="date"
              placeholder="选择日期" v-model="formTrucklicense.registrationDate">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="强制报废日期:" label-width="120px" prop="mandatoryScrap">
             <div class="block">
            <el-date-picker
              type="date"
              placeholder="选择日期" v-model="formTrucklicense.mandatoryScrap">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="整备质量:" label-width="120px" prop="overallQuality">
            <el-input  placeholder="请输入整备质量" v-model="formTrucklicense.overallQuality"></el-input>
        </el-form-item>
        <el-form-item label="检验有效期:" label-width="120px" prop="expirationDate">
             <div class="block">
            <el-date-picker
              type="date"
              placeholder="选择日期" v-model="formTrucklicense.expirationDate">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="核定载质量:" label-width="120px" prop="allowableWeight">
            <el-input  placeholder="请输入核定载质量" v-model="formTrucklicense.allowableWeight"></el-input>
        </el-form-item>
        <el-form-item label="有效期:" label-width="120px" prop="validityPeriod">
             <div class="block">
            <el-date-picker
              type="date"
              placeholder="请输入行驶证有效期 " v-model="formTrucklicense.validityPeriod">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="道路运输证号:" label-width="120px" prop="transportCertificateNumber">
            <el-input  placeholder="请输入道路运输证号" v-model="formTrucklicense.transportCertificateNumber"></el-input>
        </el-form-item><br>
        <el-form-item label="图片信息" label-width="120px" prop="picture">
            <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false" v-model="formTrucklicense.picture">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                    <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                    >
                    <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                    >
                    <i class="el-icon-download"></i>
                    </span>
                    <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                    >
                    <i class="el-icon-delete"></i>
                    </span>
                </span>
                </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </el-form-item><br><hr>
            <div v-show="xzsBj" style="text-align:center">
            <el-button  type="danger" @click="xszbj()">编辑</el-button>
            <el-button  @click="handleDialogClose()">取消</el-button>
            </div>
            <div v-show="xszAdd" style="text-align:center">
            <el-button type="danger" @click="onSubmit('formInline')" >保存</el-button>
            <el-button  @click="returnPage">返回</el-button>
            </div>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="车次信息">
        <h4>车次信息</h4>
        <el-form class="demo-form-inline" :inline="true" :model="fromTransportTrips">
            <el-form-item label="所属线路" prop="transportLineId">
                <el-input  placeholder="请输入所属线路" v-model="fromTransportTrips.transportLineId" disabled></el-input>
                </el-form-item>
            <el-form-item label="所属车次" prop="name">
                <el-input  placeholder="请输入所属车次" v-model="fromTransportTrips.name" disabled></el-input>
                </el-form-item>
        <hr>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button @click="handleDialogClose()">返回</el-button>
    </el-form>
    </el-tab-pane>
  </el-tabs>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        jbxxBj:true,
        jbxxAdd:false,
        xszAdd:false,
        xzsBj:true,
        dialogImageUrl: '',
        dialogVisible: false,
        tabPosition: 'left',
        dialogProps: {
        visible: false,
        action: '',
        title: ''
      },
      formTruck:{
        id:"",
        licensePlate:"",
        fleetId:"",
        truckTypeid:"",
        allowableVolume:"",
        allowableload:"",
        deviceGpsId:""
      },
      formTrucklicense:{
        id:"",
        engineNumber:"",
        registrationdate:"",
        mandatoryScrap:"",
        overallQuality:"",
        expirationDate:"",
        allowableWeight:"",
        validityPeriod:"",
        transportCertificateNumber:"",
        picture:""
      },
      fromTransportTrips:{
        transportLineId:"",
        name:""
      },
      loading:false
      };
    },
    methods: {
       submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.dialogProps.action === 'add') {
            this.doSaveTruck()
          }
        } else {
          return false
        }
      })
    },
      returnPage(){
        window.history.go(0)
      },
        jbxxbj(){
        this.jbxxBj=false;
        this.jbxxAdd=true;
        },
        xszbj(){
        this.xzsBj=false;
        this.xszAdd=true;
        },
        handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },
    handleDialogClose() {
      this.dialogProps.visible = false
    },
    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs['formmInline'].clearValidate()
      })
    },
    outputError(error) {
      console.log(error.response ? error.response : error.message)
      this.loading = false
      this.$message({
        showClose: true,
        message: '出错了，请按F12查看浏览器日志。',
        type: 'error'
      })
    }

    },
     mounted: function() {
    this.$nextTick(() => {
      this.$on('openDetailTruckDialog', function(Truck,TruckLicense) {
        this.formTruck=Truck
        this.formTrucklicense=TruckLicense
        this.dialogProps.action = 'add'
        this.dialogProps.visible = true
      })
    })
  }
  };
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

